<template>
	<view class="">
		<!-- 活动列表信息 -->
		<view class="active-list">

			<view class="active-head">
				<view class="head-img">
					<img :src="userInfo.head" alt="">
				</view>
				<view class="active-name-info">
					<view class="active-name">
						{{userInfo.name}}
					</view>
					<view class="active-introduce">
						{{userInfo.position}}
					</view>
				</view>
			</view>
			<view class="active-title">
				<text style="color: red;margin-right:10rpx">*</text> <text>标题：</text>
				<u--input placeholder="请输入标题内容" v-model="title" border="none" clearable></u--input>
			</view>
			<view class="active-title active-time">
				<text style="color: red;margin-right:10rpx">*</text> <text>时间：</text>
				<text @click="startClick" class="start-time">{{startTime}}</text>
				<text>-</text>
				<text @click="endClick" class="end-time">{{endTime}}</text>
			</view>

			<view class="active-title active-select-address">
				<text style="color: red;margin-right:10rpx">*</text> <text>地址：</text>
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion" class="address-pick">
					<text class="month-address">{{province}}</text>
					<text class="month-address">{{city}}</text>
					<text class="month-address">{{district}}</text>
					<img class="active-select-icon"
						src="https://file.casugn.com/storecompcard//9XyFV0MI1esRc6cf147e5a154628efec3f5fe0b5285d_1658388985397.png"
						alt="">
				</pick-regions>

			</view>

			<view class="active-title">
				<text style="color: red;margin-right:10rpx">*</text> <text>详细地址：</text>
				<u--input v-model="address" placeholder="请输入具体地址" border="none" clearable></u--input>
			</view>
			<view class="active-content">
				<text style="color: red;margin-right:10rpx">*</text> <text>内容：</text>
				<u--textarea v-model="content" class="active-content-content" :height="200" count>
				</u--textarea>
			</view>

			<view class="active-invite">
				<text style="color: red;margin-right:10rpx">*</text> <text>邀请人员：</text>
				<view class="active-invite-img" @click="toInviteLists" v-if="inviteList.length==0">
					<img src="https://file.casugn.com/storecompcard//IsrwBq1acMwQb36a3e864f136d76694ec64c5b35f7a6_1658388912042.png"
						alt="">
				</view>
				<view class="ava-box" @click="toInviteLists" v-if="inviteList.length!=0">
					<u-avatar class="ava-item" :src="item.head" shape="circle" size="60"
						v-for="(item,index) in inviteList" :key="index"></u-avatar>
				</view>
			</view>
			<view class="active-info">
				<text style="color: red;margin-right:10rpx">*</text> <text>主题图片：</text>
				<view class="active-info-img">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" width="690" height="350">
						<image
							src="https://file.casugn.com/storecompcard//tE3lUFBVfFpVfeb639e047d56f7c34f05e795cf5a096_1663234482398.jpeg"
							mode="aspectFit" style="width: 690rpx;height: 350rpx;"></image>
					</u-upload>
				</view>
			</view>



			<view class="sign-up">
				<u-button type="primary" shape="circle" color="#413BF3" text="提交活动" @click="submitActive()">
				</u-button>
			</view>

		</view>
		<u-datetime-picker :show="timeShow" v-model="startTimeValue" mode="datetime" @confirm="startTimeConfirm"
			@cancel="startTimeClose" closeOnClickOverlay :minDate="startTimeValue" @close="timeShow=false">
		</u-datetime-picker>
		<u-datetime-picker :show="endTimeShow" v-model="endTimeValue" :minDate="startTimeValue" mode="datetime"
			closeOnClickOverlay @close="endTimeShow=false" @confirm="endTimeConfirm" @cancel="endTimeClose">
		</u-datetime-picker>
		<u-popup :show="showInviteList" :round="20" mode="bottom" @close="showInviteList=false" closeable>
			<view class="dlgWp">
				<view class="moreListWp">
					<checkbox-group placement="column" @change="chooseInvite">
						<view class="moreItem" v-for="(item,index) in friendList" :key="index">
							<view class="left">
								<img :src="item.head" alt="" class='leftImgWp'>
							</view>
							<view class="right">
								<view>
									<text class="name"> {{item.name?item.name:''}}</text>
								</view>
								<view class="company">
									{{item.company?item.company:''}}
								</view>
							</view>
							<view class="chooseWp">
								<checkbox :value="JSON.stringify(item)" :checked="item.isChoose" />
							</view>
						</view>
					</checkbox-group>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		areaLists
	} from '@/config/staticConfig.js'
	import baseConfig from '@/config/baseUrl.js'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				region: [],
				areaLists, //省市列表
				areaShow: true, //省市显示
				userInfo: {},
				title: '', //标题
				address: '', //地址
				content: '', //内容
				imageUrl: '', //图篇
				addressArea: '', //省市区
				province: '', //省
				city: '', //市
				district: '', //区
				startTime: "请选择开始时间",
				endTime: '请选择结束时间',
				fileList1: [],
				// 活动信息列表
				activeList: [

				],

				// 开始时间事件显示隐藏
				timeShow: false,
				startTimeValue: Number(new Date()),
				// 结束时间
				endTimeShow: false,
				endTimeValue: Number(new Date()),
				seletInfoArr: [],
				switchValue: false, //是否通知邀请人员
				inviteList: [], //邀请人员列表
				showInviteList: false, // 显示邀请人员列表
				friendList: [], //好友列表

			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			},
			// ...mapGetters(['userInfo']),
		},
		onLoad(option) {
			console.log(option)
			if (option.seletArr) {
				this.seletInfoArr = JSON.parse(option.seletArr)
				console.log(this.seletInfoArr)
			} else {
				this.seletInfoArr = []
			}
			if (option.dataInfo) {
				let dataInfo = JSON.parse(option.dataInfo)
				this.title = dataInfo.title
				this.address = dataInfo.address
				this.startTime = dataInfo.startTime
				this.endTime = dataInfo.endTime
				this.imageUrl = dataInfo.image
				this.content = dataInfo.content
				this.province = dataInfo.province
				this.city = dataInfo.city
				this.district = dataInfo.district
				this.addressArea = this.province + this.city + this.district
				if (this.imageUrl) {
					let date = {
						message: "",
						size: 2351629,
						status: "success",
						thumb: this.imageUrl,
						type: "image",
						url: this.imageUrl
					}
					this.fileList1.push(date)
				} else {
					this.fileList1 = []
				}


			} else {
				this.title = ''
				this.address = ''
				this.startTime = '请选择开始时间'
				this.endTime = '请选择结束时间'
				this.imageUrl = ''
				this.content = ''
				this.province = ''
				this.city = ''
				this.district = ''
				this.fileList1 = []
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('_userInfo')
			console.log(this.userInfo)
		},
		methods: {
			// 获取选择的地区
			handleGetRegion(region) {
				console.log(region)
				this.region = region
				this.addressArea = ''
				this.province = region[0].name //省
				this.city = region[1].name //市
				this.district = region[2].name //区
				this.addressArea = this.province + this.city + this.district
				console.log("打印的是地址")
				console.log(this.addressArea)
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event.file[0])
				// this.imageUrl = event.file[0].url
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						// message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseConfig.uploadUrl + '/casugn-system/sys/common/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							console.log("测试一下上传视频")
							if (data.success) {
								this.imageUrl = data.message
								console.log(this.fileList1)
								// this.videoUrl=data.message
								resolve(data.message)
							}
						}
					});
				})
			},

			areaConfirm(e) {
				console.log(e)
			},
			toAttendPerson() {
				uni.navigateTo({
					url: '/pagesBusiness/circleList/attendPerson'
				})
			},
			// 时间戳转yy-mm-dd hh-mm-ss
			shijianc(time) {
				var date = new Date(time)
				console.log("测试" + date)
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
				// + ':'
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
				return Y + M + D + h + m
			},
			// 开始时间选择
			startClick() {
				// console.log(new Date().getTime())
				// console.log(Number(new Date().getTime()))
				this.startTimeValue = Number(new Date().getTime())
				this.timeShow = true
			},
			// 开始时间时间确认
			startTimeConfirm(val) {
				let a = this.shijianc(val.value)
				this.startTime = a
				this.timeShow = false
				console.log(a)
			},
			// 开始时间取消选择
			startTimeClose() {
				this.timeShow = false
			},

			// 结束时间选择
			endClick() {
				// console.log(new Date().getTime())
				// console.log(Number(new Date().getTime()))
				this.endTimeValue = Number(new Date().getTime())
				this.endTimeShow = true
			},
			// 结束时间时间确认
			endTimeConfirm(val) {
				let a = this.shijianc(val.value)
				this.endTime = a
				this.endTimeShow = false
				console.log(a)
			},
			// 结束时间取消选择
			endTimeClose() {
				this.endTimeShow = false
			},
			async toInviteLists() {
				let payload = {
					openId: this.userInfo.openId,
					isDel: 0
				}
				let res = await this.$api.queryCardByCondition(payload) //获取好友列表
				if (res.success && res.result.length > 0) {
					let arr = res.result.map(item => {
						item.isChoose = false
						return item
					})
					this.friendList = [...new Set(arr)]
					this.showInviteList = true
				} else {
					this.friendList = []
				}
				//显示参会人员列表

			},
			chooseInvite({
				detail
			}) {
				console.log(detail.value, 'detail');
				this.inviteList = detail.value.map(item => {
					let newItem = JSON.parse(item)
					return newItem
				})
			},
			// 通知邀请人员改变
			switchChange(val) {
				console.log(val)
				this.switchValue = val
			},

			// 提交活动
			submitActive() {
				if (this.title == "") {
					uni.showToast({
						title: "标题不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.address == "") {
					uni.showToast({
						title: "详细地址不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.startTime == "请选择开始时间") {
					uni.showToast({
						title: "请选择开始时间",
						icon: 'none'
					});
					return false
				}
				if (this.endTime == "请选择结束时间") {
					uni.showToast({
						title: "请选择结束时间",
						icon: 'none'
					});
					return false
				}
				if (this.imageUrl == "") {
					uni.showToast({
						title: "请选择封面照片",
						icon: 'none'
					});
					return false
				}
				if (this.content == "") {
					uni.showToast({
						title: "请输入活动内容",
						icon: 'none'
					});
					return false
				}
				if (this.addressArea == "") {
					uni.showToast({
						title: "请选择地址",
						icon: 'none'
					});
					return false
				}
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let cardId = uni.getStorageSync('cardId')
				console.log("这是cardId", cardId)
				let list = this.inviteList.map(item => {
					return item.friendOpenId
				})
				let data = {
					qzActivity: {
						cardId: cardId,
						openId: openId.openid,
						title: this.title,
						address: this.address,
						startTime: this.startTime,
						endTime: this.endTime,
						image: this.imageUrl,
						content: this.content,
						province: this.province,
						city: this.city,
						district: this.district,
						sourceType: 1,
						icon: this.userInfo.head,
						name: this.userInfo.name,
						sysOrgCode: this.userInfo.position,
					},
					list,
					notiFy: this.switchValue
				}
				this.$api.releaseNewActive(data).then(res => {
					console.log(res)
					// this.signSuccess=res.result
					if (res.success) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pagesBusiness/circleIndex/circleIndex'
							})
						}, 1000)

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #EEEEEE;
		padding: 41upx 30upx 100upx;
		position: relative;

		.active-status {
			position: absolute;
			width: 140upx;
			height: 130upx;
			top: 38upx;
			right: 29upx;

			img {
				width: 140upx;
				height: 130upx;
			}
		}

		.active-head {
			padding: 37upx 0;
			display: flex;
			border-bottom: 1upx solid #EEEEEE;
			letter-spacing: 3upx;

			.head-img {
				width: 72upx;
				height: 72upx;
				border-radius: 50%;

				img {
					width: 72upx;
					height: 72upx;
					margin-top: 1upx;
				}
			}

			.active-name-info {
				margin-left: 21upx;

				.active-name {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.active-introduce {
					margin-top: 19upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 400upx;
				}
			}
		}

		.active-title {
			display: flex;
			// jus
			letter-spacing: 3upx;
			// margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			height: 110upx;
			line-height: 110upx;
			border-bottom: 1upx solid #EEEEEE;

			.active-text {
				color: #000000;
			}
		}

		.active-invite {
			display: flex;
			letter-spacing: 3upx;
			// margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			height: 110upx;
			line-height: 110upx;
			border-bottom: 1upx solid #EEEEEE;

			.active-invite-img {
				width: 50upx;
				height: 50upx;
				vertical-align: middle;

				img {
					width: 50upx;
					height: 50upx;
					vertical-align: middle;
				}
			}

			.ava-box {
				margin-top: 25upx;
				display: flex;
				// .ava-item{
				// 	position: relative;
				// 	top: 20upx;
				// }
			}
		}

		.active-time {

			.start-time,
			.end-time {
				font-size: 24upx;
				color: #000000;
			}
		}

		.active-content {
			display: flex;
			// line-height: 48upx;
			letter-spacing: 3upx;
			// margin-top: 30upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			// height: 110upx;
			line-height: 50upx;
			padding: 37upx 0;
			border-bottom: 1upx solid #EEEEEE;

			::v-deep .u-textarea {
				padding: 5upx !important;
			}

			.active-text {
				color: #000000;
			}
		}

		.active-info {
			border-bottom: 1upx solid #EEEEEE;
			padding: 37upx 0;

			.active-info-img {
				margin: 0 auto;
				margin-top: 30upx;
				width: 690upx;
				height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;

				// border-bottom: 1upx solid #EEEEEE;
				img {
					width: 690upx;
					height: 350upx;
				}

				.active-info-mask {
					position: absolute;
					width: 690upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		.active-switch {
			display: flex;
			border-bottom: 1upx solid #EEEEEE;
			padding: 37upx 0;

			.switch-box {
				display: flex;

				.switch-text1 {
					margin-right: 10upx;
				}

				.switch-text2 {
					color: #413BF3;
					margin-left: 10upx;
				}

				.switch-item {
					margin: 0 10upx;
				}
			}
		}

		.active-select-address {
			display: flex;
			// justify-content: space-between;
			height: 110upx;
			line-height: 110upx;
			align-items: center;
			position: relative;

			.address-pick {

				width: 570upx;
				font-size: 24upx;

				text {
					margin-left: 8upx;
				}
			}

			.active-select-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-12upx);
				right: 10upx;
				width: 30upx;
				height: 30upx;
			}
		}

		.active-address {
			height: 110upx;
			line-height: 110upx;
			border-bottom: 1upx solid #EEEEEE;
			// margin-top: 30upx;
			letter-spacing: 3upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.active-title {
				border-bottom: none;

				.active-text {
					color: #413BF3;
				}

			}


		}

		.avatar {
			padding: 37upx;
			flex: 1;
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #EEEEEE;

			.avatar-img {
				img {
					width: 60upx;
					height: 60upx;
					margin: 0 -15upx;
				}
			}

			.avatar-num {
				font-size: 24upx;
				font-family: PingFang SC;
				line-height: 60upx;
				font-weight: 400;
				color: #413BF3;

				.avatar-num-right {
					margin-right: 10upx;
				}

			}

		}

		.sign-up {
			margin-top: 120upx;
		}

		::v-deep .u-upload__deletable {
			right: 20upx;
			top: 20upx;
			width: 20upx;
			height: 20upx;
			text-align: center;
			border-bottom-left-radius: 0;

			// background: transparent;
			.u-icon--right {
				text {
					font-size: 30upx !important;
					top: 7upx !important;
					left: 6upx !important;
				}
			}
		}
	}

	//弹窗样式
	.dlgWp {
		width: 90%;
		margin: 30rpx auto;
		padding-bottom: 40rpx;
		height: 30vh;
		overflow: auto;

		.title {
			text-align: center;
			color: #333333;
		}


		.moreListWp {
			height: 100vh;
			padding-top: 30upx;

			.moreItem {
				display: flex;
				margin: 30upx 0;
				padding-bottom: 15upx;
				border-bottom: 1upx solid #eee;

				.left {
					padding-right: 30upx;

					.leftImgWp {
						width: 80upx;
						height: 80upx;
					}
				}

				.right {
					flex: 1;

					.name {
						width: 91upx;
						height: 29px;
						font-size: 30upx;
						font-weight: 500;
						color: #000000;
						line-height: 36upx;
					}

					.title {
						padding-left: 22upx;
						font-size: 18upx;
						font-weight: 400;
						color: #666666;
						line-height: 36upx;
					}

					.company {
						padding-top: 12upx;
						font-size: 24upx;
						font-weight: 400;
						color: #333333;
						line-height: 36upx;
					}
				}

				.chooseWp {
					margin-left: 20rpx;
				}
			}


		}
	}
</style>
